
<%--
  Created by IntelliJ IDEA.
  User: liuqing
  Date: 2024/10/29
  Time: 22:38
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>小说系统登录</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css">
    <link rel="stylesheet" href="css/style.css">
    <script src="js/jquery-3.7.1.min.js"></script>
    <style>
        /* 默认状态下显示登录表单 */
        .wrapper .form-wrapper.sign-in {
            transform: scale(1) translate(0,0);
            opacity: 1; /* 显示登录表单 */
            transition: transform 0.5s ease, opacity 0.5s ease; /* 添加平滑过渡效果 */
        }

        /* 默认状态下隐藏管理员登录表单 */
        .wrapper .form-wrapper.adminSign-in {
            transform: scale(0) translate(200px, -300px);
            opacity: 0; /* 隐藏管理员登录表单 */
            transition: transform 0.5s ease, opacity 0.5s ease; /* 添加平滑过渡效果 */
        }

        /* 当.wrapper具有active类时隐藏登录表单 */
        .wrapper.active .form-wrapper.sign-in {
            transform: scale(0) translate(-200px, 300px);
            opacity: 0; /* 隐藏登录表单 */
        }

        /* 当.wrapper具有active类时显示管理员登录表单 */
        .wrapper.active .form-wrapper.adminSign-in {
            transform: scale(1) translate(0, 0);
            opacity: 1; /* 显示管理员登录表单 */
        }
        #errname{
            color: white;
            display: inline-block;
            width: 80px;
            height: 20px;
            position: absolute;
            top: 33%;
            right: 30%;
        }
        #errpassword{
            color: white;
            display: inline-block;
            width: 65px;
            height: 20px;
            position: absolute;
            top: 49%;
            right: 30%;
        }
    </style>
</head>
<%--如果user不为空，设置好账号和密码--%>
<body>
<div class="wrapper">
    <!-- 表示这个元素同时属于 form-wrapper 和 sign-in 这两个类。 -->
    <div class="form-wrapper sign-in">
        <a href="#" class="adminSignIn-link"><i class="fa-solid fa-repeat" style="color: white;position: absolute;
    top: 4%;right: 18%;"></i></a>
        <form action="UserLoginServlet" method="post">
            <h2>登 录</h2>
            <div class="input-group">
                <!-- <input type="text" placeholder="用户名" id="username"> -->
                <!-- required：这个属性是一个布尔属性，表示该输入框是必填项 -->
                <input type="text" id="username" name="username" required>
                <label for="username">用户名</label>
            </div>
            <div class="input-group">
                <input type="password" id="password" name="password" required>
                <label for="password">密码</label>
            </div>
            <div class="remember">
<%--                <input type="hidden" name="rem" id="rem" value="no">--%>
                <label for="rem"><input type="checkbox" id="rem" name="rem">记住密码</label>
            </div>
            <button type="submit" id="loginButton" onclick="saveCredentials()">登 录</button>
            <div class="signUp-link">
                <p>还没有账号？<a href="register.jsp" class="signUpBtn-link">注册</a>
                    <a href="forgotPassword.jsp" class="forgotPasswordBtn-link">忘记密码</a></p>
            </div>
            <div class="social-platform">
                <p>社交账号登录</p>
                <div class="social-icons">
                    <!-- 引入了font-awesome，所以这里的i表示图标 -->
                    <a href="https://im.qq.com"><i class="fa-brands fa-qq"></i></a>
                    <a href="https://weixin.com"><i class="fa-brands fa-weixin"></i></a>
                    <a href="https://www.douyin.com"><i class="fa-brands fa-tiktok"></i></a>
                </div>
            </div>
        </form>
    </div>
    <div class="form-wrapper adminSign-in">
        <a href="#" class="signInBtn-link"><i class="fa-solid fa-repeat" style="color: white;position: absolute;
    top: 4%;right: 18%;"></i></a>
        <form action="#" method="post" id="myForm">
            <h2>后端管理员登录</h2>
            <div class="input-group">
                <!-- <input type="text" placeholder="用户名" id="username"> -->
                <!-- required：这个属性是一个布尔属性，表示该输入框是必填项 -->
                <input type="text" id="adminName" name="adminName" style="width: 140px;" required>
                <label for="adminName">用户名</label>
            </div>
            <span id="errname"></span>
            <div class="input-group">
                <input type="password" id="adminPassword" name="adminPassword" style="width: 140px;" required>
                <label for="adminPassword">密码</label>
            </div>
            <span id="errpassword"></span>
            <div class="input-group">
                <input type="text" id="verification" name="verification" style="width: 140px;" required>
                <label for="verification">验证码</label>
                <button id="sendCode">发送验证码</button>
            </div>
            <button type="submit" id="adminLoginButton">登 录</button>
            <input type="hidden" name="page" value="1">
        </form>
    </div>
</div>

<script>
    const adminSignBtnInLink = document.querySelector(".adminSignIn-link");
    const signInBtnLink = document.querySelector(".signInBtn-link");
    const wrapper = document.querySelector(".wrapper");

    // 切换到管理员登录表单
    adminSignBtnInLink.addEventListener("click", () => {
        wrapper.classList.add("active");
    });

    // 切换回用户登录表单
    signInBtnLink.addEventListener("click", () => {
        wrapper.classList.remove("active");
    });
</script>

<script>
    $(document).ready(function() {
        $('#adminName').on('focus', function() {
            // 清除错误信息
            $('#errname').text('');
        });
        $('#adminPassword').on('focus', function() {
            // 清除错误信息
            $('#errpassword').text('');
        });
        $('#myForm').on('submit', function(e) {
            e.preventDefault(); // 阻止表单默认提交行为

            $.ajax({
                type: "POST",
                url: "AdminLoginServlet", // Servlet的URL
                data: $(this).serialize(), // 将表单数据序列化
                success: function(response) {
                    if(response==="codeError"){
                        alert("验证码错误!");
                        $('#verification').val("");
                    }else if (response==="usernameError"){
                        $('#errname').text("用户名错误");
                        $('#adminName').val("");
                    }else if (response==="passwordError"){
                        $('#errpassword').text("密码错误");
                        $('#adminPassword').val("");
                    }else if(response==="no"){
                        alert("权限不足！");
                        $('#adminName').val("");
                        $('#adminPassword').val("");
                        $('#verification').val("");
                    } else{
                        alert("登录成功！");
                        // window.location.href = "admin/admin_index.jsp";
                        window.location.href = "AdminIndexServlet";
                    }
                },
                error: function(xhr, status, error) {
                    alert(error+"服务器内部错误！");
                }
            });
        });
    });

    $(document).ready(function() {
        var countdown = 60; // 倒计时时间
        var timer; // 用于存储定时器的变量

        $('#sendCode').click(function() {
            // 清除之前的定时器
            clearInterval(timer);

            // 发送AJAX请求到服务器
            $.ajax({
                type: "POST",
                url: "GenerateCodeServlet", // Servlet的URL
                success: function(response) {
                    // 显示服务器返回的消息
                    // $('#errVerification').text(response.message);
                    console.log(response.message);
                    // 开始倒计时
                    timer = setInterval(function() {
                        countdown--;
                        $('#sendCode').attr('disabled', true); // 禁用按钮
                        $('#sendCode').text(countdown);
                        if (countdown === 0) {
                            clearInterval(timer);
                            $('#sendCode').text('重新发送').removeAttr('disabled'); // 重置按钮
                            countdown = 60; // 重置倒计时时间
                        }
                    }, 1000);
                },
                error: function(xhr, status, error) {
                    $('#errVerification').text("Error occurred");
                }
            });
        });
    });
</script>

<script>
    // 设置 cookie
    function setCookie(name, value, days) {
        var expires = "";
        if (days) {
            var date = new Date();
            date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
            expires = "; expires=" + date.toUTCString();
        }
        document.cookie = name + "=" + encodeURIComponent(value) + expires + "; path=/";
    }

    // 获取 cookie
    function getCookie(key) {
        var cookieValue = null;
        var cookies = document.cookie;
        var cookieArr = cookies.split(';');
        for (var i = 0; i < cookieArr.length; i++) {
            var cookie = cookieArr[i].trim();
            var keyArray = cookie.split('=');
            if (keyArray[0] === key) {
                cookieValue = decodeURIComponent(keyArray[1]);
                break;
            }
        }
        return cookieValue;
    }

    // 在页面加载时加载凭据
    window.onload = function() {
        var username = getCookie("username");
        var password = getCookie("password");
        var remember = getCookie("remember") === "true";

        // 如果存在，填充到表单中
        if (username) {
            document.getElementById("username").value = username;
        }
        if (password) {
            document.getElementById("password").value = password;
        }
        if (remember !== null) {
            document.getElementById("rem").checked = remember;
        }
    };

    // 保存用户名、密码和记住密码的选择
    function saveCredentials() {
        var username = document.getElementById("username").value;
        var password = document.getElementById("password").value;
        var remember = document.getElementById("rem").checked;

        // 只有当勾选“记住密码”时才保存用户名和密码
        if (remember) {
            setCookie("username", username, 7);
            setCookie("password", password, 7);
            setCookie("remember", "true", 7);
        } else {
            // 如果未勾选，删除 cookie
            setCookie("username", "", -1); // 删除用户名 cookie
            setCookie("password", "", -1); // 删除密码 cookie
            setCookie("remember", "false", -1); // 删除记住密码 cookie
        }
    }
</script>
<%
    String msg =(String) request.getAttribute("msg");
    if (msg!=null){
        request.removeAttribute("msg"); // 从请求属性中移除消息
%>
<script type="text/javascript">
    window.onload = function() {
        alert("<%=msg%>");
    };
</script>
<%
    }
%>
</body>
</html>
